<template>
  <view class="ea-folder__wrap flex items-center justify-center" :style="wrapStyle">
    <view class="ea-folder" :style="getFolderStyle">
      <view v-if="getList.length === 5 || getList.length === 6" class="ea-folder__placeholder" />
      <template v-for="(item, index) in getList" :key="index">
        <wd-icon
          v-if="item.avatarType === 'wot'"
          :class="getImageClass"
          :style="getImageStyle"
          :name="item.avatar"
        />
        <view
          v-else-if="item.avatarType === 'unocss' || item.avatarType === 'iconfont'"
          :class="[getImageClass, item.avatar]"
          :style="getImageStyle"
        />
        <image
          v-else-if="item.avatarType === 'local'"
          :class="getImageClass"
          :style="getImageStyle"
          :mode="item.avatarMode || 'scaleToFill'"
          :src="item.avatar"
        />
      </template>
      <view v-if="getList.length === 5 || getList.length === 6" class="ea-folder__placeholder" />
    </view>
    <view v-if="isDot" class="ea-folder__wrap-dot" :style="dotStyle"></view>
  </view>
</template>
<script setup lang="ts">
  import { computed } from 'vue';

  import { useAuth } from '@/hooks/useAuth';
  import { isNumber } from '@/utils/is';

  import { folderProps } from './props';

  defineOptions({
    name: 'ea-folder',
    options: {
      virtualHost: true,
      addGlobalClass: true,
      styleIsolation: 'shared',
    },
  });

  const props = defineProps(folderProps);

  const { hasAuth } = useAuth();

  /** 获取显示个数 */
  const getShowCount = computed(() => {
    const showCount = props.showCount >= 1 && props.showCount <= 9 ? props.showCount : 9;
    return showCount;
  });
  /** 获取列表 */
  const getList = computed(() => {
    const count = getShowCount.value;
    const list =
      props.list
        ?.filter((o) => hasAuth(o.authority) && o.visible !== false)
        ?.sort((a, b) => a.order - b.order) || [];
    return list;
  });

  /** 获取 wrap 类型 */
  const wrapStyle = computed(() => {
    const size = addUnit(props.size);
    return `width: ${size};height: ${size}`;
  });
  /** 获取文件夹类型 */
  const getFolderStyle = computed(() => {
    const scale = addUnit(props.scale);
    const size = `calc(${addUnit(props.size)} - ${scale})`;
    const borderRadius = addUnit(props.round);
    const padding = addUnit(props.padding);
    let style = `width: ${size};height: ${size};border-radius:${borderRadius};padding:${padding}`;
    if (props.background) {
      style = `${style};background:${props.background}`;
    }
    return style;
  });
  /** 获取图标类名 */
  const getImageClass = computed(() => `ea-folder__img ea-folder__img${getList.value.length}`);
  /** 获取图标类型 */
  const getImageStyle = computed(() => {
    const imgBorderRadius = addUnit(props.imgRound);
    const style = `borderRadius: ${imgBorderRadius}`;
    return style;
  });
  /** 获取徽标红点类型 */
  const dotStyle = computed(() => {
    const size = addUnit(props.dotSize);
    const top = addUnit(props.dotOffset[0]);
    const right = addUnit(props.dotOffset[1]);
    return `width: ${size};height: ${size};background-color:${props.dotColor};top:${top};right:${right}`;
  });

  /** 添加单位 */
  function addUnit(value: string | number = 'auto') {
    return isNumber(value) ? `${value}px` : value;
  }
</script>
<style lang="scss" scoped>
  @import 'wot-design-uni/components/common/abstracts/variable';

  .ea-folder__wrap {
    position: relative;
  }
  .ea-folder__wrap-dot {
    position: absolute;
    border-radius: 50%;
  }
  .ea-folder {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    background: $-color-border;
  }
  .ea-folder__placeholder {
    width: 90%;
    height: 15%;
  }

  .ea-folder__img {
    // color: var(
    //   --wot-tabbar-inactive-color,
    //   var(--wot-color-title, var(--wot-color-black, rgb(0, 0, 0)))
    // );
  }

  .ea-folder__img1 {
    width: 100%;
    height: 100%;
  }
  .ea-folder__img2,
  .ea-folder__img3,
  .ea-folder__img4 {
    width: 48%;
    height: 48%;
  }

  .ea-folder__img3:nth-child(1) {
    margin: 0 20%;
  }
  .ea-folder__img5,
  .ea-folder__img6,
  .ea-folder__img7,
  .ea-folder__img8,
  .ea-folder__img9 {
    width: 31%;
    height: 31%;
  }
  .ea-folder__img5:nth-child(2) {
    margin-left: 16.6666666%;
  }
  .ea-folder__img5:nth-child(3) {
    margin-right: 16.6666666%;
  }
  .ea-folder__img7:nth-child(1) {
    margin: 0 30%;
  }
  .ea-folder__img8:nth-child(1) {
    margin-left: 16.6666666%;
  }
  .ea-folder__img8:nth-child(2) {
    margin-right: 16.6666666%;
  }

  .wot-theme-dark {
    .ea-folder {
      background: $-dark-border-color;
    }

    .ea-folder__img {
      // color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
    }
  }
</style>
